
#page4_2body{
	width: 100%;
	height: 100%;
	position: relative;
}


#page4_2fatherbox{
	width:66%;
	height: 70%;
	position: relative;
	left: 22%;
	top: 25%;
	opacity: 0;
	
}
.page4-2sonbox1{
	width: 41%;
	height: 16%;
	overflow: hidden;
	position: absolute;
	left: 30%;

}

.page4_2numbox1,.page4_2numbox2,.page4_2numbox3,.page4_2numbox4{
	float: left;
	width: 17%;
	height: 100%;

}
.page4_2num{
	width: 97%;
	height: 70%;
	font-size:0.5em;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	border: 1px solid gray;
	color: gray;

}
.page4_2wenzi{
	width: 100%;
	height: 30%;
	background-color: gray;
	font-size:0.25em;
	border-bottom-right-radius:8px;
	border-bottom-left-radius:8px;
	color: black;

}
.page4_2wenzibox{
	margin-left:20%;
}
.page4_2wz1{
	font-size: 0.3em;
	text-align: left;
	color: lightgray;
}
.page4_2wz2{
	font-size: 0.2em;
	text-align: left;
	line-height:20px;
	color: gray;
	margin-top: 3%;
}

.page4-2sonbox2{
	width: 42%;
	height: 16%;
	overflow: hidden;
	position: absolute;
	top: 20%;
	right: 0;
}
.page4-2sonbox3{
	width: 42%;
	height: 16%;
	overflow: hidden;
	position: absolute;
	top: 40%;
	left:0;
}
.page4-2sonbox4{
	width: 42%;
	height: 16%;
	overflow: hidden;
	position: absolute;
	top: 60%;
	left:30%;
}

.page4_2more{
	position: absolute;
	top: 85%;
	left: 40%;
	transition:all 0.5s;

}
.page4_2moreyy{
	width: 60px;
	height: 1px;
	position: absolute;
	top: 98%;
	left: 40%;
	box-shadow: 0px 5px 5px ;
	opacity: 0;
	transition:all 0.5s;
}

.page4_2more a{
	color: gray;
	font-size: 0.4em;
}

#page4_2morebox:hover .page4_2more{
	top: 82%;
}
#page4_2morebox:hover .page4_2moreyy{
	opacity: 1;
	top: 95%;
}

/* 动画效果开始 */
.page4-2sonbox1:hover .page4_2numbox1 .page4_2num{
	border: 1px solid red;
	color: red;
}
.page4-2sonbox1:hover .page4_2numbox1 .page4_2wenzi{
	background-color: red;
}

.page4-2sonbox2:hover .page4_2numbox2 .page4_2num{
	border: 1px solid red;
	color: red;
}
.page4-2sonbox2:hover .page4_2numbox2 .page4_2wenzi{
	background-color: red;
}
.page4-2sonbox3:hover .page4_2numbox3 .page4_2num{
	border: 1px solid red;
	color: red;
}
.page4-2sonbox3:hover .page4_2numbox3 .page4_2wenzi{
	background-color: red;
}
.page4-2sonbox4:hover .page4_2numbox4 .page4_2num{
	border: 1px solid red;
	color: red;
}
.page4-2sonbox4:hover .page4_2numbox4 .page4_2wenzi{
	background-color: red;
}
/* 动画效果结束 */


/* 遮罩动画 */
.section4 .zz{
    position:absolute;
    width:100%;
	height:100%; 
	top:0;
	overflow:hidden;
	display:none;
}
.zz .left_zz{
    position:absolute;
    left:0%;
    top:0%;
    z-index: 10;
    width:0%;
    height:100%;
    background: url(../images/l_shude.png) no-repeat;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    /* -webkit-transform:rotate(20deg); */
}

.page4current{

    -webkit-animation: shuade1 .8s .2s forwards linear;
    -moz-animation: shuade1 .8s .2s  forwards linear;
    animation: shuade1 .8s .2s  forwards linear;
}

.page4out{
   width:38%;
   -webkit-animation: shuade2 .5s .2s forwards linear;
    -moz-animation: shuade2 .5s .2s  forwards linear;
    animation: shuade2 .5s .2s  forwards linear;
}

.zz .right_zz{
   position:absolute;
   right:0%;
   top:0%;
   z-index: 10;
   width:0%;
   height:100%;
   background: url(../images/r_shude.png) no-repeat;
   filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
   -moz-background-size: 100% 100%;
   background-size: 100% 100%;
  
}


.clearfix {
    zoom: 1;
}



/*遮罩*/
@-webkit-keyframes shuade1{
	0%{ width:100%;}
    20%{width:80%;}
    40%{width:70%;}
    60%{width:60%;}
    80%{width:50%;}
    100%{width:38%;}
}

@keyframes shuade1{
    0%{ width:100%;}
    20%{width:80%;}
    40%{width:70%;}
    60%{width:60%;}
    80%{width:50%;}
    100%{width:38%;}
}

@-webkit-keyframes shuade2{
    0%{ width:38%;}
    25%{width:28%;}
    50%{width:18%;}
    75%{width:8%;}
    100%{width:0%;}

}

@keyframes shuade2{
	0%{ width:38%;}
    25%{width:28%;}
    50%{width:18%;}
    75%{width:8%;}
    100%{width:0%;}
}

    /* 响应式代码 */
 @media all and (max-width: 1920px) {  /* pc */
            
        }

          @media all and (max-width: 800px) {  /* 手机 */
            .page4_2numbox1,.page4_2numbox2,.page4_2numbox3,.page4_2numbox4{
                display:none;
            }
          	
          
        }

         @media all and (max-width: 600px) { 
            .page4-2sonbox1,.page4-2sonbox2,.page4-2sonbox3,.page4-2sonbox4{
                left: -90px;
                width: 290px;
                font-size: 0.75em;
            }
          	
          
        }
